<template>
  <div class="ikun-home-container">
    <el-tabs v-model="activeName" class="ikun-eltab">
      <el-tab-pane label="Pvp" name="Pvp">
        <span slot="label" class="label-span"><i class="el-icon-monitor mr5"></i>Pvp</span>
      </el-tab-pane>
      <el-tab-pane name="Copy">
        <span slot="label" class="label-span"><i class="el-icon-reading mr5"></i>副本</span>
      </el-tab-pane>
      <el-tab-pane name="PlayerInfo">
        <span slot="label" class="label-span"><i class="el-icon-user mr5"></i>玩家信息</span>
      </el-tab-pane>
      <el-tab-pane name="Knapsack">
        <span slot="label" class="label-span"><i class="el-icon-suitcase mr5"></i>背包</span>
      </el-tab-pane>
      <el-tab-pane name="WorldBoss">
        <span slot="label" class="label-span"><i class="el-icon-view mr5"></i>世界BOSS</span>
      </el-tab-pane>
    </el-tabs>
    <component :is="activeName"> </component>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
  components: {
    // pvp
    Pvp: () => import("./lib/Pvp.vue"),
    // copy
    Copy: () => import("./lib/GameInstance.vue"),
    // playerInfo
    PlayerInfo: () => import("./lib/PlayerInfo.vue"),
    // knapsack
    Knapsack: () => import("./lib/Knapsack.vue"),
    // worldBoss
    WorldBoss: () => import("./lib/WorldBoss.vue"),
  },
})
export default class HomeView extends Vue {
  activeName: string = "Pvp";
}
</script>
<style lang="stylus">
@import "./style.styl"
</style>
